<template>
  <div>
    <div v-for="(child, index) in labellist" :key="index">
      <richtext v-if="child.tag==='div'" :class="child.class" :style="child.style">
        <template v-for="(item,y) in child.texts">
          <span v-if="item.tag==='text'" class="text" :key="y" :style="item.style">{{item.text}}</span>
          <image v-if="item.tag==='image'" :key="y" :src="item.src" resize="stretch"
                 :style="{width: item.width, height: item.height}"></image>
          <image v-if="item.tag==='br'" src="" :key="y" class="br"></image>
        </template>
      </richtext>
    </div>
  </div>
</template>
<style>
/*行样式，需要什么自行添加*/
.div {
  /* margin-bottom: 30px; */
}

/*文字大小*/
.text {
  font-size: 32px;
}

/*richtext不支持换行，改用image标签处理*/
.br {
  height: 20px;
  width: 690px;
}

/*编辑器 对齐样式*/
.ql-align-center {
  text-align: center;
}

.ql-align-right {
  text-align: right;
}

.ql-align-justify {
  text-align: justify;
}
</style>
<script>
const eeui = app.requireModule('eeui');
var {html2json} = require('../html2json/html2json');
/*
  eeui html解析 (weex)
*/
export default {
  props: {
    //内容
    content: {
      type: String,
      required: true
    },
    //图片最大宽度 自动等比 px
    imgWidth: {
      type: Number,
      required: true,
      default: 690
    }
  },
  data() {
    return {
      imgNum: 0,
      showImgNum: 0,
      reload: false,
      labellist: [],
    };
  },
  watch: {
    // //获取数据进行解析绑定，获取原图片大小处理
    content:{
      handler(newData,oldData){
        if (newData) {
          // console.warn(newData)
          // console.warn('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
          this.reload = false;
          this.labellist = [];
          this.imgNum = 0;
          const json = html2json(newData);
          this.translateJSON(json);
          this.showImgNum = 0;
          this.labellist.forEach((item, x) => {
            item.texts.forEach((image, y) => {
              if (image.tag == "image") {
                this.getImageLoad(image, x, y);
              }
            })
          });
          console.log(this.labellist)
        }
      },
      immediate:true,
      deep:true
    },
    labellist:{
      handler(newData,oldData){
        console.warn(newData)
        console.warn(this.imgNum)
        if (this.imgNum == 0) {
          this.reload = true;
          return;
        }
        //表示有需要处理的图片，判定是否处理完毕
        if (this.showImgNum > 0 && this.showImgNum == this.imgNum) {
          this.reload = true;
        }
      }
    },
    // content() {
    //     console.warn(this.content)
    //     console.warn('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
    //     if (this.content) {
    //         this.reload = false;
    //         this.labellist = [];
    //         this.imgNum = 0;
    //         const json = html2json(this.content);
    //         this.translateJSON(json);
    //         this.showImgNum = 0;
    //         this.labellist.forEach((item, x) => {
    //             item.texts.forEach((image, y) => {
    //                 if (image.tag == "image") {
    //                     this.getImageLoad(image, x, y);
    //                 }
    //             })
    //         });
    //     }
    // },
    //如果监听到值改变
    // labellist() {
    //     //表示没有需要处理的图片，直接展示HTML
    //     console.warn(this.imgNum)
    //     if (this.imgNum == 0) {
    //         this.reload = true;
    //         return;
    //     }
    //     //表示有需要处理的图片，判定是否处理完毕
    //     if (this.showImgNum > 0 && this.showImgNum == this.imgNum) {
    //         this.reload = true;
    //     }
    // }
  },
  methods: {
    /*
    * 图片自适应
    */
    getImageLoad(image, x, y) {
      if (image.width && image.height) {
        return;
      }
      eeui.getImageSize(image.src, result => {
        this.showImgNum++;
        if (result.status === 'success') {
          var bi = this.imgWidth / result.width;
          var _h = result.height * bi;
          var  _w = this.imgWidth;
          if (this.labellist[x] && this.labellist[x].texts[y]) {
            this.labellist[x].texts[y].width = _w + 'px';
            this.labellist[x].texts[y].height = _h + 'px';
            this.labellist = JSON.parse(JSON.stringify(this.labellist));
          }
        }
      });
    },
    /*
    * css处理
    */
    translateCSS(node, styleL) {
      if (node.attr && node.attr.style) {
        //循环处理
        var css_arr = node.attr.style.split(";")
        css_arr.forEach(item => {
          var css = item.split(":")
          var name = css[0];
          //更换css名为 richtext 下子节点支持的名字；如果是其他 比如：font-size需要支持，则需要更改为fontSize
          if (name == "background-color") {
            name = "backgroundColor";
          }
          if (name == "font-style") {
            name = "fontStyle";
          }
          if (name == "text-decoration") {
            name = "textDecoration";
          }
          if (name == "font-weight") {
            name = "fontWeight";
          }
          if (name == "line-height") {
            name = "lineHeight";
          }
          if (name == "font-size") {
            name = "fontSize";
          }
          styleL[name] = css[1];
        });
      }
    },
    /*
    * html解析，可自行扩展
    */
    translateJSON(node) {
      var _labellist = [];
      const translate = (_texts, node, styleList) => {
        //继承上级样式
        var styleL = styleList;
        this.translateCSS(node, styleL);
        //处理img标签
        if (node.tag && node.tag === "img") {
          if (!node.attr.width || !node.attr.height) {
            this.imgNum++;
          }
          _texts.push({
            tag: "image",
            width: (node.attr.width ? node.attr.width + 'px' : 0),
            height: (node.attr.height ? node.attr.height + 'px' : 0),
            src: node.attr.src
          });
        } else if (node.tag && node.tag === "br") {
          //处理br标签
          _texts.push({
            tag: "br"
          });
        } else if (node.tag && node.tag === "u") {
          //处理下划线
          styleL['textDecoration'] = 'underline';
        } else if (node.tag && node.tag === "em") {
          //处理斜体
          styleL['fontStyle'] = 'italic';
        } else if (node.tag && node.tag === "s") {
          //处理中间线
          styleL['textDecoration'] = 'line-through';
        } else if (node.tag && node.tag === "strong") {
          //处理加粗
          styleL.fontWeight = 'bold';
        } else if (!node.tag && node.node === "text") {
          //处理所有文本
          const style = styleL
          _texts.push({
            tag: "text",
            style,
            text: node.text.replace(/&[a-z]{3,4};/g, "")
          });
        }
        //循环处理
        if (node.child && node.child.length) {
          node.child.forEach(c => translate(_texts, c, styleL));
        }
      };
      //处理一级标签
      node.child.forEach(item => {
        var _texts = [];
        if (item.child && item.child.length) {
          item.child.forEach(c => translate(_texts, c, {}));
        }
        //默认加载div样式
        var _class = ["div"];
        if (item.attr && item.attr.class) {
          _class.push(item.attr.class);
        }
        var styleL = {};
        this.translateCSS(item, styleL);
        _labellist.push({
          tag: "div",
          style: styleL,
          class: _class,
          texts: _texts
        });
      });
      this.labellist = _labellist;
    }
  }
}
</script>
